<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .wrap {
            width: 300px;
            height: 150px;
            border: 1px solid black;
            position: relative;
        }

        #nis {
            position: absolute;
            top: 50%;
            left: 50%;
            /* line-height: 150px; */
            transform: translate(-50%, -50%);
            font-size: 2em;
            color: deepskyblue;
        }

        #canvas {
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <p id="nis">再买一张</p>
        <canvas id="canvas"> </canvas>
    </div>
</body>
<script>
    var j = document.getElementById("nis")
    var ns = ["再买一张", "再买两张", "再买三张", "再刮一张", "咦好我中了", "你中了什么", "那是人家可怜你", "施舍你的", "再刮一张", "再买三张"]



    // var num = Math.floor( Math.random()*(最大值-最小值+1)+最小值 )
    var num = Math.floor(Math.random() * (ns.length - 1 - 0 + 1) + 0)
    j.innerHTML = ns[num]

    var canvas = document.getElementById("canvas")
    // canvas.style.border = "1px solid deeppink"
    var ctx = canvas.getContext("2d")
    ctx.fillRect(0, 0, 300, 150)
    canvas.onmousedown = function () {
        canvas.onmousemove = function (e) {
            ctx.clearRect(e.offsetX, e.offsetY, 10, 10)
        }
    }
    canvas.onmouseup = function () {
        canvas.onmousemove = null
    }
</script>

</html>